<template>
	<view class="container">
		<!-- <scroll-view class="list-scroll-content" scroll-y="true" lower-threshold="50" @scrolltolower="loadmore"> -->
		<!-- <myNavigate @changecity="changecity" :cityname='cityname'></myNavigate> -->
		<view class="header-container">
			<view class="banner">
				<image class="banner-bg" src="/static/icon/midan_banner_01.png"></image>
				<image class="banner-bg-bottom" src="/static/arc.png"></image>
			</view>
		</view>
		<view class="sortlist">
			<myTab v-if="secCates.length>0" @tabClick="chikdClick" ref="mid" isCate border='#ee5b25' :tabs='secCates'></myTab>
		</view>
		<view class="group-wrap">
			<view class="group-wrap-list" v-for="(item,index) in grouplist" :key="index" @click="toproduct(item)">
				<view class="storeType" v-if="item.shop.isSelf == 0">自营</view>
				<view class="img-left">
					<image class="Image" :src="item.img" mode=""></image>
				</view>
				<view class="goodsinfor">
					<view class="title">
						<!-- <text class="title_active">{{item.shop.name}}</text> -->
						<text class="title_default">{{item.name}}</text>
					</view>
					<view class="subtitle">
						{{item.goodsTips}}
					</view>
					<!-- <view style="display: flex;justify-content: space-between;font-size: 12px;color: #ff6600;">
						<view>让利值：{{item.rebatePv}}</view>
					</view> -->
					<view class="good-price">
						<view class="">
							<text class="discount">￥{{item.shopPrice}}</text>
							<text class="original">￥{{item.marketPrice}}</text>
						</view>
					</view>
					<view class=" good-price" style="width: 100%">
						<view class="bt">消费奖励：{{item.rebate_gg_credit}}</view>
						<view class="alldiscount" v-show="item.isAllStart == 1">全民拼团</view>
					</view>
					<view class="good-price">
					</view>
				</view>
			</view>

			<empty v-if="showempty" emptyText="无对应商品"></empty>
		</view>
		<uni-load-more v-if="needLoad" :status="loadingType"></uni-load-more>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import myNavigate from "@/components/myNavigateBar/myNavigateBar.vue"
	import myTab from "@/components/scrollTab/scrollTab.vue";
	import empty from "@/components/empty.vue"
	export default {
		components: {
			myTab,
			myNavigate,
			empty,
			uniLoadMore
		},
		data() {
			return {
				goodsCatId: '',
				shopId: '',
				headerPosition: '',
				loadingType: 'more',
				needLoad: true,
				showempty: false,
				iswaitload: false,
				page: 1,
				loading: false,
				isdone: false,
				cityname: '',
				secCates: [],
				grouplist: []
			}
		},
		onLoad(options) {
			this.shopId = options.shopId
			if (uni.getStorageSync('mycity')) {
				this.cityname = uni.getStorageSync('mycity')
			}
			this.getsortlist()

		},
		methods: {
			getsortlist() {
				let that = this;
				let data = {
					shopId: this.shopId || ''
				}
				that.$Request.request('/api/pintuan/catList', 'GET', data).then(res => {
					if (res.status == 1) {
						this.secCates = res.data.list
						if (res.data.list.length != 0) {
							this.goodsCatId = res.data.list[0].catId;
						}
						this.loadGroup()
					}
				})
			},
			chikdClick(data) {
				console.log(data)
				this.goodsCatId = data.item.catId
				this.grouplist = [];
				this.isdone = false;
				this.page = 1;
				this.loadGroup()
			},
			onPageScroll(e) {
				//兼容iOS端下拉时顶部漂移
				if (e.scrollTop >= 0) {
					this.headerPosition = "fixed";
				} else {
					this.headerPosition = "absolute";
				}
			},
			onReachBottom() {
				let that = this;
				if (that.isdone) {
					return false;
				}
				that.loading = true;
				that.page++
				that.loadingType = 'loading'
				that.loadGroup()
			},
			changecity(e) {
				this.cityname = e;
			},
			toproduct(item) {
				//测试数据没有写id，用title代替
				let id = item.id;
				uni.navigateTo({
					url: '/pages/product/product?id=' + id + '&isAllStart=' + item.isAllStart
				})
			},
			loadGroup() {
				let that = this;
				console.log(that.isdone, '2')
				if (that.isdone) {
					return false;
				}
				let data = {};
				if (that.shopId != '') {
					data.shopId = that.shopId
					data.goodsCatId = that.goodsCatId,
						data.latitude = getApp().globalData.globa_latitude,
						data.longitude = getApp().globalData.globa_longitude,
						data.p = that.page
				} else {
					data.goodsCatId = that.goodsCatId,
						data.latitude = getApp().globalData.globa_latitude,
						data.longitude = getApp().globalData.globa_longitude,
						data.p = that.page
				}

				that.$Request.request('/api/pintuan/all', 'GET', data).then(res => {
					if (res.status == 1) {

						res.data.list.forEach(item => {
							that.grouplist.push(item)
						})
						that.loadingType = 'more'
						// that.grouplist = res.data.list
						if (res.data.list.length < 20) {
							that.loading = true;
							that.isdone = true;
							that.loadingType = 'noMore'
						}

						that.grouplist.length == 0 ? [this.showempty = true, this.needLoad = false] : [this.showempty = false, this.needLoad =
							true
						]
					}
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bt {
		font-size: 10px;
		color: #fff;
		height: 40upx;
		width: 240upx;
		text-align: center;
		line-height: 40upx;
		border-radius: 20px;
		background: -webkit-linear-gradient(left, #f3982a, #fc5402);
		background: linear-gradient(to right, #f3982a, #fc5402);
		box-sizing: content-box;
	}

	.banner {
		position: relative;
		width: 750rpx;
		text-align: center;
		height: 355rpx;
		margin-top: 30rpx;

		&-bg {
			width: 710rpx;
			margin: 0 auto;
			height: 355rpx;
			border-radius: 20rpx;
			box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.3);

			&-bottom {
				width: 750rpx;
				position: absolute;
				bottom: 0;
				height: 50rpx;
				left: 0;
			}
		}

	}

	.group-wrap {
		padding: 10upx;
	}

	.list-scroll-content {
		// max-height: 100vh;
	}

	.sortlist {
		padding: 20upx;
	}

	.storeType {
		background-color: #e12038;
		color: #fff;
		font-size: 16rpx;
		position: absolute;
		@include textVCenter(40rpx);
		transform: rotate(-45deg);
		left: -20rpx;
		z-index: 19;
		width: 90rpx;
		text-align: center;
		top: 4rpx;
	}

	.group-wrap-list {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		box-shadow: 0px 0px 10upx 10upx #f2f2f2;
		border-radius: 20upx;
		padding: 16upx;
		margin-bottom: 20upx;
		position: relative;
	}

	.img-left {
		width: 260upx;
		height: 260upx;

		.Image {
			width: 260upx;
			height: 260upx;
		}
	}

	.goodsinfor {
		width: 65%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 20upx;

		.title {
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;

			.title_active {
				font-size: 24upx;
				color: rgb(238, 91, 37);
				background-color: #fff;
				margin-right: 10upx;
			}

			.title_default {
				font-size: 30upx;
				font-weight: 600;
				width: 400upx;
				display: inline-block;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;

			}
		}

		.subtitle {
			font-size: 30upx;
			color: #ccc;
		}

		.good-price {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			align-items: center;
			-webkit-justify-content: space-between;
			justify-content: space-between;

			.discount {
				font-size: 36upx;
				color: rgb(238, 91, 37);
				font-weight: 600;
			}

			.original {
				font-size: 24upx;
				color: #ccc;
				text-decoration: line-through;
				margin: 0upx 30upx 0upx 15upx;
			}

			.alldiscount {
				color: rgb(245, 93, 37);
				border-radius: 1px;
				border: 1px solid rgb(245, 93, 37);
				border-radius: 20upx;
				font-size: 24upx;
				width: 180upx;
				height: 40upx;
				line-height: 40upx;
				text-align: center;
				box-sizing: content-box;
			}
		}
	}
</style>
